import { Component } from 'react';
import { View, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import rightIcon from '@/assets/images/order/right.png';
import failIcon from '@/assets/images/appointment/fail.png';
import './index.scss';

export default class Index extends Component {
  state = {
    result: '1',
    orderCode: '',
    notPay: '0',
    price: '0.00',
  };
  componentDidMount = async () => {
    const querys = Taro.getCurrentInstance().router?.params;
    if (querys) {
      this.setState({
        result: querys.res,
        orderCode: querys.orderCode,
        notPay: querys.notPay,
        price: querys.price,
      });
    }
  };

  toOrderDetail = () => {
    const { orderCode } = this.state;
    if (!orderCode) {
      Taro.showToast({
        title: '订单信息错误，即将返回首页',
        icon: 'none',
        duration: 1500,
      });
      setTimeout(() => {
        Taro.switchTab({
          url: `pages/home/index`,
        });
      }, 1500);
      return;
    }
    Taro.redirectTo({
      url: `/subPages/order/detail/index?type=1&orderCode=${orderCode}`,
    });
  };

  toCartPage = () => {
    Taro.redirectTo({
      url: '/subPages/cart/index',
    });
  };

  render() {
    const { result, notPay, price } = this.state;
    return (
      <View className="payment-result">
        {result === '1' ? (
          <View>
            <View className="payment-title">
              <Image src={rightIcon} />
              {notPay === '1' ? '购买成功' : '支付成功'}
            </View>
            {notPay !== '1' && (
              <View>
                <View className="payment-price">￥{price}</View>
                <View className="payment-way">微信支付</View>
              </View>
            )}
            <View className="payment-btns">
              <View onClick={this.toOrderDetail}>查看详情</View>
            </View>
          </View>
        ) : result === '0' ? (
          <View>
            <View className="payment-title">
              <Image src={failIcon} />
              支付失败
            </View>
            <View className="payment-btns">
              <View onClick={this.toOrderDetail}>查看详情</View>
            </View>
          </View>
        ) : (
          <View>
            <View className="payment-title">
              <Image src={failIcon} />
              支付失败
            </View>
            <View className="payment-btns">
              <View onClick={this.toOrderDetail}>查看详情</View>
            </View>
          </View>
        )}
      </View>
    );
  }
}
